<template>
  <el-container>
    <el-breadcrumb separator>
      <!-- <el-breadcrumb-item>用户管理</el-breadcrumb-item> -->
      <el-form label-width="120px" class="form-fliter" @submit.native.prevent>
        <!--高级检索-->
        <div class="searchDiv">
             <div class="dataSearch" style="margin-top:150px;margin-right:8px">
                <el-select v-model="ruleForm.typeList" multiple placeholder="请选择用户状态" style="line-height:36px;height:36px">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
               </el-select>
          </div>
          <div class="dataSearch" style="margin-top:149px">
            <el-input
              type="text"
              v-model="searchName"
              :placeholder="staffNoPlacehold"
              clearable
              @keyup.enter.native="search">
              <i @click="search" style="color:#0090ff;font-size:14px" class="iconfont icon-sousuo" slot="suffix"></i>
            </el-input>
          </div>
          <!-- <span style="margin-top:150px" class="high-search" v-on:click.stop="doCollapse">
            高级搜索
            <i :class="collapse?'el-icon-caret-bottom':'el-icon-caret-top'"></i>
          </span> -->
        
          

          <div class="checkDiv" v-if="collapse" id="myPanel">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
              <el-form-item label="用户状态：">
                <el-checkbox-group v-model="ruleForm.typeList">
                  <el-checkbox label="100001" name="type">锁定</el-checkbox>
                  <el-checkbox label="100002" name="type">解锁</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
            <div class="mr-btn">
              <el-button type="primary" @click="search('close')">确定</el-button>
            </div>
          </div>
          <el-button style="width:88px;margin-top:150px" class="def-btn-sty" @click="clearData">重置</el-button>
        </div>
      </el-form>
    </el-breadcrumb>

    <!-- <el-breadcrumb class="input-num-reserach" v-if="searchName || ruleForm.typeList.length!=0">
      <div>
        <span v-if="searchName">{{searchName}}<span class="x-handel" @click="deleteSelectHandel('1', searchName)">x</span></span>
        <span v-for="(val, index) in ruleForm.typeList" :key="index">
          <span v-if="val=='100001'">锁定<span class="x-handel" @click="deleteSelectHandel('2', val)">x</span></span>
          <span v-if="val=='100002'">解锁<span class="x-handel" @click="deleteSelectHandel('2', val)">x</span></span>
        </span>
      </div>
    </el-breadcrumb> -->
      <div class="mr-btn operate-sty">
        <el-button type="primary" class="golable-sty-btn" @click="addUserVisible">新增用户</el-button>
        <el-button class="def-btn-sty golable-sty-btn" type="primary" @click="deleteUser('', true)">删除</el-button>
      </div>
    <el-main v-loading="loading"  style="margin-top:22px">
      <el-table
        style="background-color:#fff;"
        :data="userList"
        class="mt-20"
        height="calc(100vh - 200px)"
        stripe
        @selection-change="handleSelectionChange">
        <el-table-column fixed type="selection" width="40" :selectable="checkSelectable"></el-table-column>
        <el-table-column fixed label="序号" type="index" width="60" :index="indexMethod"></el-table-column>
        <el-table-column fixed prop="account" label="用户ID" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="policeId" :label="staffNo" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="idCardNumber" label="身份证号" width="200" show-overflow-tooltip></el-table-column>
        <el-table-column prop="userName" label="真实姓名" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="companyName" label="单位名称" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="lockFlag" label="用户状态" width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.lockFlag==1">锁定</span>
            <span v-else>解锁</span>
          </template>
        </el-table-column>
        <el-table-column label="角色名" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.roles | getRoleInfo }}</template>
        </el-table-column>
        <el-table-column width="100" show-overflow-tooltip label="权限查看" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" content="权限查看" placement="top">
              <i style="color:#0090ff" @click="viewRole(scope.row)" class="iconfont icon-sousuo"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column width="100" show-overflow-tooltip label="角色设置" align="center">
          <template slot-scope="scope" v-if="scope.row.account!='administrator' && scope.row.account!='adminstrator'">
            <el-tooltip class="item" effect="light" content="角色设置" placement="top">
              <i style="color:#0090ff" @click="setRole(scope.row)" class="iconfont icon-shezhi"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope" v-if="scope.row.account!='administrator' && scope.row.account!='adminstrator'">
            <el-tooltip class="item" effect="light" content="编辑" placement="top">
              <i style="color:#0090ff" @click="editHandel(scope.row)" class="iconfont icon-xiugaibianji"></i>
            </el-tooltip>&nbsp;&nbsp;
            <el-tooltip class="item" effect="light" content="删除" placement="top">
              <i style="color:#0090ff" class="iconfont icon-shanchu" @click="deleteUser(scope.row)"></i>
              
            </el-tooltip>&nbsp;&nbsp;
            <el-tooltip class="item" effect="light" content="锁定" placement="top" v-if="scope.row.lockFlag==0">
              <i style="color:#0090ff" class="iconfont icon-kaisuo" @click="addLock(scope.row)"></i>
              
            </el-tooltip>
            <span v-if="scope.row.lockFlag==0"> &nbsp;&nbsp;</span>
           
            <el-tooltip class="item" effect="light" content="解锁" placement="top" v-if="scope.row.lockFlag==1">
              <i style="color:#0090ff" class="iconfont icon-guansuo" @click="addLock(scope.row)"></i>
              
            </el-tooltip>
            <span v-if="scope.row.lockFlag==1"> &nbsp;&nbsp;</span>
            <el-tooltip class="item" effect="light" content="详情" placement="top">
              <i style="color:#0090ff" class="iconfont icon-wenbenxiangqing" @click="viewUser(scope.row)"></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <div class="clearfix enc-pagination" style="padding:10px">
        <el-pagination
          class="mr-btn"
          background
          @current-change="handleCurrentChange"
           @size-change="handleSizeChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="prev, pager, next, jumper,sizes,total"
          :total="total">
        </el-pagination>
      </div>
    </el-footer>

    <!--增加用户-->
    <add-user v-if="dialogVisible" ref="addUser" @callBack="addUserCallBack"></add-user>

    <!--更改角色-->
    <change-role v-if="dialogRoleVisible" ref="changeRole" @roleCallBack="roleVisible"></change-role>
    <!--权限查看-->
    <authorityDialog ref="authority"></authorityDialog>
    <!--角色详情-->
    <user-view v-if="viewUserVisible" ref="viewUser" @callBack="viewUserVisible = false"></user-view>
  </el-container>
</template>

<script>
import AddUser from "@/views/usersManagement/addUser";
import changeRole from "@/views/usersManagement/changeRole";
import authorityDialog from "@/views/authorityManage/authorityManageDialog";
import userView from "@/views/usersManagement/userView";
import {
  getUserList,
  deleteUserInfo,
  lockHandel,
  isLockCloakUserRole
} from "@/api/userApi.js";
export default {
  components: {
    AddUser,
    changeRole,
    authorityDialog,
    userView
  },
  data() {
    return {
      loading: false,
      searchName: "",
      collapse: false,
      dialogVisible: false,
      dialogRoleVisible: false,
      viewUserVisible: false,
      currentPage: 1,
      total: 0,
      pageSize: 10,
      userList: [],
      ruleForm: {
        typeList: []
      },
      deleteData: [], //用于批量删除
      staffNo: window.pageData.USER_MANAGEMENT.staffNo,
      staffNoPlacehold: `请输入用户ID、${window.pageData.USER_MANAGEMENT.staffNo}、身份证号或真实姓名`,
      options: [{
          value: 100001,
          label: '锁定'
        }, {
          value: 100002,
          label: '解锁'
        },],
    };
  },
  watch: {
    "ruleForm.typeList":{
      deep:true,
      handler:function(){
        this.currentPage = 1;
        this.getUserInfoList()
      }
    }
  },
  created() {
    this.getUserInfoList();
    document.addEventListener("click", (e)=>{
      var sp = document.getElementById("myPanel");
      if(sp){
        if(!sp.contains(event.target)) {
          this.collapse= false;
        }
      }
    })
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getUserInfoList();
    },
    deleteSelectHandel(type, val) {
      if(type=='1') {
        this.searchName = "";
      }
      if(type=='2') {
        this.ruleForm.typeList.forEach((v,index)=>{
          if(v==val) {
            this.ruleForm.typeList.splice(index,1);
          }
        })
      }
      this.getUserInfoList();
    },
    //查询所有用户
    getUserInfoList() {
      this.loading = true;
      let params = {
        search: this.searchName,
        isLock: "",
        page: this.currentPage,
        per_page: this.pageSize,
        sort: "-id"
      };
      if (
        this.ruleForm.typeList.length !== 0 &&
        this.ruleForm.typeList.length !== 2
      ) {
        params.isLock = this.ruleForm.typeList[0] == "100001" ? 1 : 0; // 1锁定 0 解锁
      }
      getUserList(params)
        .then(res => {
          this.loading = false;
          if (res.data.success) {
            this.total = res.data.data.total;
            if(res.data.data && res.data.data.list) {
              this.userList = res.data.data.list;
            }
          }
        })
        .catch(err => {
          this.loading = false;
        });
    },
    //打开新增用户窗口
    addUserVisible() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addUser.openDialogVisible();
      });
    },
    //打开高级检索
    doCollapse() {
      this.collapse = !this.collapse;
    },
    //高级检索查询
    search(type) {
      this.currentPage = 1;
      if (type === "close") {
        this.collapse = !this.collapse;
      }
      this.getUserInfoList();
    },
    // 重置
    clearData() {
      this.searchName = "";
      this.ruleForm.typeList = [];
      this.getUserInfoList();
    },
    //用户编辑
    editHandel(val) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addUser.openDialogVisible("edit", val);
      });
    },
    //表格选择
    handleSelectionChange(val) {
      this.deleteData = val;
    },
    //分页选择
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getUserInfoList();
    },
    addUserCallBack() {
      this.dialogVisible = false;
      this.getUserInfoList();
    },
    roleVisible() {
      this.dialogRoleVisible = false;
      this.getUserInfoList();
    },
    viewRole(val) {
      if(val.roles.length==0) {
        this.$message.warning("用户没有赋予角色，无法查看");
        return false;
      }
      this.$refs.authority.openDialog({
        from: "user",
        type: "view",
        id: val.id,
        roles: val.roles
      });
    },
    setRole(val) {
      this.dialogRoleVisible = true;
      this.$nextTick(() => {
        this.$refs.changeRole.openDialogVisible(val);
      });
    },
    deleteUser(val, type) {
      let id = "";
      let account = [];
      if (type) {
        //批量删除
        if (this.deleteData.length === 0) {
          this.$message.warning("请选择要删除的用户");
          return false;
        }
        this.deleteData.forEach((val, index) => {
          account.push(val.account);
          if (index === this.deleteData.length - 1) {
            id += val.id;
          } else {
            id += val.id + ",";
          }
        });
      } else {
        id = val.id;
        account.push(val.account);
      }
      this.$confirm("此操作将永久删除用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "element-btn",
        type: "warning"
      }).then(() => {
        deleteUserInfo(id).then(res => {
          if (res.data.success) {
            this.$message.success("删除成功");
            this.getUserInfoList();
          } else {
            console.log(res)
            this.msg(res.data.message, "error");
          }
        });
      });
    },
    addLock(val) {
      let tips = "确定锁定";
      let isLock = true;
      if (val.lockFlag == 1) {
        tips = "确定解锁";
        isLock = false;
      }
      this.$confirm(tips, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "el-button--",
        type: "warning"
      }).then(() => {
        lockHandel(val.id, isLock).then(res => {
          if (res.data.success) {
            let message = val.lockFlag == 1 ? "解锁成功" : "锁定成功";
            this.$message.success(message);
            this.getUserInfoList();
          } else {
            this.$message.error(res.data.message);
          }
        });
      });
    },
    viewUser(val) {
      this.viewUserVisible = true;
      this.$nextTick(() => {
        this.$refs.viewUser.openDialogVisible(val);
      });
    },
    mouseleave(e) {
      var o = e.relatedTarget || e.toElement;
      if (o && o != null) {
        this.collapse = !this.collapse;
      }
    },
    msg(err, type) {
      this.$alert(err, "提示", {
        confirmButtonText: "确定",
        type: type,
        callback: action => {}
      });
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1;
    },
    checkSelectable(val) {
      return val.account != "administrator" && val.account != "adminstrator";
    }
  },
  filters: {
    getRoleInfo(val) {
      let name = "";
      val.forEach((res, index) => {
        if (index === val.length - 1) {
          name += res.roleName;
        } else {
          name += res.roleName + "，";
        }
      });
      return name;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.enc-pagination {
  float: right;
}
.operate-sty{
  position: absolute;
  top:40px;
  left:20px;
}
/deep/ {
  .el-table .cell .el-button {
    font-size: 14px;
    line-height: 18px;
    color: #409eff;
  }
  .el-table .cell .el-button :hover {
    color: #409eff;
  }
  .el-table::before {
    height: 0;
  }
  .el-footer {
    padding-right: 40px;
    margin: 0 0 0 40px;
    // background-color: #ffffff;
  }
}
.checkDiv{
  margin-top: 100px;
}
.element-btn{
  border: 1px solid #0090ff;
  color: #0090ff;
}
.mt-20{
  margin-top: 30px;
}
</style>